<template>
<div>
<div class="head">
<div class="headfig" @click="handleGallery">
<router-link  to="/" tag="span" class="back">
<span class="header-ico iconfont">&#xe634;</span>
</router-link>
<img class="headfig-img" :src="banner">
</div>

<div class="mp-header" v-show="showNav" @scroll="scrollHeight" :style="opaObj">
<router-link to="/" tag="span" class="iconfont fan">&#xe618;</router-link>
<h1 mp-role="title" class="mp-header-title">故宫</h1></div>

<div class="head-info">
<div class="head-title">
{{name}}
</div>
</div>
<div class="deta-word">
<span class="iconfont">&#xe64a;&nbsp;&nbsp;</span>
<em class="number">{{gallery.length}}</em>
</div>
</div>
<gallery v-show="isShow" @hide-gall="handleHide" :gallery="gallery"></gallery>
</div>
</template>

<script>
import Gallery from '@/components/gallery/Gallery'
export default {
  name: 'DetailImgroll',
  components: {
    Gallery
  },
  props: {
    name: String,
    banner: String,
    gallery: Array
  },
  data () {
    return {
      isShow: false,
      showNav: '',
      opaObj: {
        opacity: 0
      }
    }
  },
  methods: {
    handleGallery () {
      this.isShow = true
    },
    handleHide () {
      this.isShow = false
    },
    scrollHeight () {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop
      let scr = this.scroll / 130
      this.opaObj.opacity = scr
      this.showNav = true
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrollHeight)
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .mp-header
     position fixed
     width 100%
     top 0px
     left 0px
     display block
     height 0.88rem
     background #00bcd4
     z-index 20
  .fan
    left 0
    top 0
    width 0.8rem
    height 0.88rem
    line-height 0.88rem
    position absolute
    font-size 0.36rem
    color #fff
    text-align center
  .mp-header-title
    overflow hidden
    margin 0 1rem
    line-height 0.88rem
    white-space nowrap
    text-overflow ellipsis
    font-size 0.32rem
    text-align center
    color #fff
  .head
    position relative
    .headfig
      overflow hidden
      height 0
      width 100%
      padding-bottom 55%
      .headfig-img
        width 100%
        vertical-align top
    .head-info
     position absolute
     left 0.2rem
     right 0rem
     height 0.4rem
     bottom 0.5rem
     color white
     font-size 0.32rem
     font-size 0.4rem
      .head-title
        position absolute
        z-index 1
        line-height 0.4rem
        color #FFFFFF
        text-shadow 0 1px 2px rgba(0,0,0,0.70)
    .deta-word
      position absolute
      right 0.2rem
      height 0.4rem
      width 1.6rem
      bottom 0.5rem
      color white
      font-size 0.3rem
      border-radius 0.2rem
      background #000000
      text-align center
      /* .number
        margin-left .rem */
    .back
      position absolute
      left 0
      top 0
      display block
      width 0.72rem
      line-height 0.72rem
      text-align center
      .header-ico
        font-size 0.6rem
        top 0.4rem
        left 0.4rem
        right 0rem
</style>
